<template>
  <el-drawer v-model="drawerProps.drawerVisible" :destroy-on-close="true" size="490px" :title="drawerProps.title">
    <el-form ref="ruleFormRef" label-width="120px" label-suffix=" :" :rules="rules" :model="drawerProps.row">
      <el-form-item label="任务名称" prop="name">
        <el-input v-model="drawerProps.row!.name" placeholder="请输入任务名称" />
      </el-form-item>

      <el-form-item label="是否每日任务" prop="isDailyMission">
        <el-radio-group v-model="drawerProps.row!.isDailyMission">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <template v-if="drawerProps.row!.isDailyMission === 1">
        <el-form-item label="建议开始时间">
          <el-time-select
            v-model="drawerProps.row!.dailyMissionStartTime"
            placeholder="选择开始时间"
            start="00:00"
            step="00:10"
            end="23:50"
            style="width: 175px"
          />
        </el-form-item>

        <el-form-item label="建议结束时间">
          <el-time-select
            v-model="drawerProps.row!.dailyMissionEndTime"
            placeholder="选择结束时间"
            :min-time="drawerProps.row!.dailyMissionStartTime"
            start="00:00"
            step="00:10"
            end="23:50"
            style="width: 175px"
          />
        </el-form-item>

        <el-form-item label="建议执行次数">
          <el-input v-model="drawerProps.row!.dailyMissionExecutionCount" placeholder="建议执行次数" style="width: 175px" />
          <span style="margin-left: 10px; font-size: 16px">次</span>
        </el-form-item>
      </template>

      <el-form-item label="注意事项" prop="description">
        <el-input v-model="drawerProps.row!.description" type="textarea" placeholder="请输入注意事项" :rows="4" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="drawerProps.drawerVisible = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">保存</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits } from "vue";
import { CarePlanTemplate } from "@/api/interface";
import { FormInstance } from "element-plus";

const ruleFormRef = ref<FormInstance>();

// 表单验证规则
const rules = reactive({
  categorizeId: [{ required: true, message: "请选择任务分类", trigger: "blur" }],
  name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
  isDailyMission: [{ required: true, message: "请选择是否每日任务", trigger: "change" }]
});

// 抽屉组件参数接口
interface DrawerProps {
  drawerVisible: boolean;
  title: string;
  row: CarePlanTemplate.ResCarePlanTemplateMissionDto;
}

// 抽屉组件参数
const drawerProps = ref<DrawerProps>({
  drawerVisible: false,
  title: "选择照护项目",
  row: {} as CarePlanTemplate.ResCarePlanTemplateMissionDto
});

// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps) => {
  drawerProps.value = params;
};

// 暴露方法给父组件调用
defineExpose({
  // 接收父组件传过来的参数
  acceptParams
});

// 确认选择照护项目
const emit = defineEmits<{
  (event: "change", payload: CarePlanTemplate.ResCarePlanTemplateMissionDto): void;
}>();
// 确认选择照护项目
const handleConfirm = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      if (drawerProps.value.row.isDailyMission === 0) {
        drawerProps.value.row.dailyMissionStartTime = undefined;
        drawerProps.value.row.dailyMissionEndTime = undefined;
        drawerProps.value.row.dailyMissionExecutionCount = undefined;
      }
      if (drawerProps.value.row.dailyMissionStartTime) {
        drawerProps.value.row.dailyMissionStartTimeValue = Number(drawerProps.value.row.dailyMissionStartTime.replace(":", ""));
      }
      if (drawerProps.value.row.dailyMissionEndTime) {
        drawerProps.value.row.dailyMissionEndTimeValue = Number(drawerProps.value.row.dailyMissionEndTime.replace(":", ""));
      }
      console.log(drawerProps.value.row);
      emit("change", drawerProps.value.row);
      drawerProps.value.drawerVisible = false;
    } catch (error) {
      console.log(error);
    }
  });
};
</script>

<style scoped lang="scss">
.categorize-container {
  width: 100%;
}
.categorize-title {
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  background-color: var(--el-color-primary-light-9);
}
.top-box {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid var(--el-aside-border-color);
  border-radius: 4px;
}
.categorize-box {
  margin-bottom: 15px;
  overflow: hidden;
  border: 1px solid var(--el-aside-border-color);
  border-radius: 4px;
}
</style>
